import { useCallback, useState } from "react"
import CallbackChild1 from './CallbackChild'
const Parent = () => {
    // 案例1
    /* const[count,setCount]=useState(0)
     const changeFn1=useCallback(()=>{
         // console.log('父组件在更新状态count')
         setCount(count+1)
     },[count])*/
    //  案例二
    const [todo,setTodo]=useState([
        {
            title:'标题'
        }
    ])
    // 父组件内部的状态
    const[name,setName]=useState(1)
    const updateName=()=>{
        setName(name+5)
    }
    const changeList=useCallback((e)=>{
        let newArr=[...todo]
        newArr.push(e)
        setTodo(newArr)
    },[todo])
    return (<div>
        {/* 案例1 */}
        <h3>useCallback</h3>
        {/* 父组件：
        count:{count}
        <button onClick={changeFn1}>count++</button> */}
        {/* 案例二 */}
        渲染totoList
        {
            todo.map((item,key)=><p key={key} >{item.title}</p>)
        }
        name:{name}<br></br>
        <button onClick={updateName}>改变name</button>
        <CallbackChild1 changeList={changeList}/>
    </div>)
}
export default Parent